<template>
  <div>
    <el-row  type="flex" justify="end">
      <div style="margin-right: 40px;margin-top: 10px;">
        <el-tag type="success" >总收入：{{this.totalIncome}}</el-tag>
        <el-tag>总支出：{{this.totalExpenditure}}</el-tag>
        <el-tag type="danger">总订单：{{this.totalOrder}}</el-tag>
      </div>
    </el-row>
    <div class="echart" id="mychart" :style="myChartStyle"></div>
  </div>
</template>

<script>
  import * as echarts from "echarts";
  import {getStatisticsInfo} from "@/api/business/order";
  export default {
    data() {
      return {
        totalExpenditure:0,
        totalIncome:0,
        totalOrder:0,
        order:[],
        zhichu:[],
        shouru:[],
        myChart: {},
        xData: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"], //横坐标
        yData: [23, 24, 18, 25, 27, 28, 25], //人数数据
        taskData: [10, 11, 9, 17, 14, 13, 14], //任务数据
        myChartStyle: { float: "left", width: "100%", height: "400px" } //图表样式
      };
    },
    created() {
    },
    mounted() {
      this.initEcharts();
      this.getOrderStatistics();
    },
    methods: {
      getOrderStatistics(){
        getStatisticsInfo().then(response=>{
          const orderCharts = response.data;
          let month = [];
          let order = [];
          let earningAmount = [];
          let expensesAmount = [];
          orderCharts.forEach(item =>{
            month.push(item.month);
            order.push(item.orderNum);
            earningAmount.push(item.earningAmount);
            expensesAmount.push(item.expensesAmount);
            this.totalOrder+=item.orderNum*1;
            console.log(item);
          })
          this.xData = month;
          console.log(this.xData)
          this.order = order;
          this.zhichu = expensesAmount;
          this.shouru = earningAmount;
          // let total = response.totalIncome > response.totalExpenditure ? response.totalIncome:response.totalExpenditure;
          // this.yData = [total*1,total*0.8,total*0.6,total*0.4,total*0.2,0];
          console.log(this.yData)
          this.totalExpenditure = response.totalExpenditure;
          this.totalIncome = response.totalIncome;
          setTimeout(() => {
            this.initEcharts();
          },1000)

        })
      },
      initEcharts() {
        const option = {
          xAxis: {
            data: this.xData
          },
          legend: { // 图例
            data: ["订单数", "支出","收入"],
            bottom: "0%"
          },
          yAxis: {},
          series: [
            {
              name: "订单数",
              data: this.order,
              type: "line", // 类型设置为折线图
              label: {
                show: true,
                position: "top",
                textStyle: {
                  fontSize: 16
                }
              }
            },
            {
              name: "支出",
              data: this.zhichu,
              type: "line", // 类型设置为折线图
              label: {
                show: true,
                position: "bottom",
                textStyle: {
                  fontSize: 16
                }
              }
            },{
              name: "收入",
              data: this.shouru,
              type: "line", // 类型设置为折线图
              label: {
                show: true,
                position: "top",
                textStyle: {
                  fontSize: 16
                }
              }
            },
          ]
        };
        this.myChart = echarts.init(document.getElementById("mychart"));
        this.myChart.setOption(option);
        //随着屏幕大小调节图表
        window.addEventListener("resize", () => {
          this.myChart.resize();
        });
      }
    },
    watch: {
      xData: {
        handler() {
          this.initEcharts();
        },
        deep: true // 深度监听数组变化
      },
      order: {
        handler() {
          this.initEcharts();
        },
        deep: true
      },
      zhichu: {
        handler() {
          this.initEcharts();
        },
        deep: true
      },
      shouru: {
        handler() {
          this.initEcharts();
        },
        deep: true
      }
    }
  };
</script>
